.red {
  color: #ee0a24;
}

.txt-center {
  text-align: center;
}

.checkGroup {
  margin: .4rem 0 0;
}

.block-btn-wrap {
  margin: .3rem .3rem 0.1rem;
}

.bgf {
  background: #fff !important;
}

// 消息公用CSS
.message-item {
  display: flex;
  align-items: center;
  padding: .2rem;
  border-bottom: 1px solid #f5f6f9;
  &:last-child {
    border-bottom: none;
  }

  &.friend-item {
    .avatar {
      width: .8rem;
      height: .8rem;
    }
    .content {
      .name {
        font-size: .28rem;
      }
    }
  }

  .avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: .9rem;
    height: .9rem;
    background: #e7eaec;
    border-radius: 50%;
    font-size: .28rem;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .red-num {
      position: absolute;
      right: 0;
      top: 0;
      color: #fff;
      background: #ee0a24;
      border-radius: 50%;
      font-size: .2rem;
      min-width: 1.2em;
      height: 1.2em;
      text-align: center;
      line-height: 1.2em;
    }

    &.new-add {
      background: rgb(245, 86, 80);
      i {
        font-size: .4rem;
        color: #fff;
      }
    }
  }

  .content {
    margin-left: .14rem;
    flex: 1;

    .name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .32rem;
      color: #333;

      .time {
        color: #999;
        font-size: .24rem;
      }
    }

    .msg {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 6rem;
      color: #999;
      font-size: .28rem;
      margin-top: .1rem;
    }
  }
}


.swipe-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 1.2rem;
  color: #fff;
  font-size: .28rem;

  &.delete {
    background: #ee0a24;
  }

  &.desc {
    background: #c7c7ce;
  }
}


.clickable {
  &:active {
    background: #d8d9da !important;
  }
}
